CSS Custom Property
--から始まるpropertyのことをCustom Propertyと呼ぶ
e.g. --main-color: black;
const --main-color = "black"のようなglobal定数を定義しているイメージ
e.g. color: var(--main-color);
定義
code:css
element {
--main-bg-color: brown;
}
const --main-bg-color = brown;のようなglobal定数を定義しているイメージ
ただ実際は、完全なglobalではなく、elementの部分でscopeを宣言している
div {..}と書けば、globalかつdivの中でのみで使用できる変数が定義される
全要素で使う場合は、:root {..}のように書く
使用
code:css
element {
background-color: var(--main-bg-color);
}
定義したscopeの中で、var(--変数名)とすることで呼び出せる
参考
ややこしそうな点
scopeは要素だけでなく、classとかも指定できる
継承されるので、完全にscopeの中でしか使えないというわけでもない
scopeは要素だけでなく、classとかも指定できる
例えば、このように書けば.twoclassがscopeになる
code:css
.two {
--test: red;
}
まあ、CSS的に考えればこれは自然mrsekut.icon
scope外では無視される
例えばdivに対して定義する
code:css
div {
--main: red;
}
classに対して使用する
code:css
.hoge {
background-color: var(--main);
}
この場合、この.hogeというclassを、
<p>に付けたときは効かなくて、
<div>に付けたときだけ効く、
という挙動になる
ややこしく見えるが、ただ単にscope外というだけmrsekut.icon
継承される
.four内で、var(--test)を使えていることがポイント
--testという変数は、.twoと.threeにしか定義していない
しかし、scope外の.fourで使用できている
つまり、scopeが、HTMLに依存して変化する
これぱっと見、割と複雑に見えるけど実際どうなんだろうmrsekut.icon
実践していくと便利な仕様というかんじなんだろうか #?? 一つの変数名に対して、1つの値しか定義できない
例えば、--black-buttonという変数に対して
(color, border, height)のような複数の値をセットすることはできない
あくまでも、値は1つのみ
const --black-button = 値であり、
値の部分はrecordやtupleは除く、というイメージ
どういうもの？
CSSにおけるglobal変数みたいな？
そうmrsekut.icon
classを使ってstyleをやっていくのとはどう違うの？
web components以外の利用用途はある？
全然普通にあるmrsekut.icon